<template>
  <view class="carousel">
    <view class="block" :style="'background-color: ' + currentCarousel.bannerColor">
      <!-- 轮播背景墙 -->
    </view>
    <swiper class="screen-swiper" indicator-dots="true" duration="700" indicator-color="#d4d4d4" indicator-active-color="#696969" :autoplay="true" :interval="5000" :circular="true" @change="changeCarousel">
      <swiper-item v-for="(item,index) in swiperList" :key="index" class="swiper-box">
        <!-- 数据库轮播清单列表 -->
        <view v-if="item.mainPic && item.materialIds" class="swiper-item" @click="goTbDetail(item, index)">
          <ImageLoad :src="item.mainPic" mode="widthFix"/>
        </view>
        <!-- 数据库轮播直接复制口令 -->
        <view v-else-if="item.mainPic && !item.materialIds" class="swiper-item" @click="copy(item, index)">
          <ImageLoad :src="item.mainPic" mode="widthFix"/>
        </view>
        <!-- 大淘客api轮播 -->
        <view v-else class="swiper-item" @click="goDtkDetail(item, index)">
          <ImageLoad :src="item.pic" mode="widthFix"/>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
  import ImageLoad from '@/pages/pagecomponents/other/imageload'
  export default {
    components: {
      ImageLoad,
    },
    data() {
      return {
        swiperList: [],
        currentCarousel: {},
      }
    },
    computed:{
      userInfo(){
        return this.$store.state.userInfo
      },
    },
    created() {
      this.getAdvertise()
    },
    methods: {
      changeCarousel(e){
        let index = e.detail.current
        this.currentCarousel = this.swiperList[index]
      },
      copy(item, index) {
        // #ifndef H5 || APP-PLUS
        getApp().mtj.trackEvent('carousel', { // 埋点统计
          title: item.title,
          index: index,
          ad_type: item.type,
          user_id: this.userInfo.id || 0,
        });
        // #endif
        
        // dev环境点击不复制
        // #ifdef MP-WEIXIN
        // if (this.isDev === 'dev') {
        //   return
        // }
        // #endif
        
        // 复制淘口令
        let copyText = ''
        copyText = `复制淘口令成功:${item.clickUrl}`
        
        // #ifndef H5
        uni.setClipboardData({
          data: copyText,
          success: function() {
            uni.hideToast(); // 隐藏默认提示框
            uni.showModal({
              content: copyText,
              showCancel: false
            });
          }
        });
        // #endif
        // #ifdef H5
        const btn = document.querySelector('.copy_tkl');
        const input = document.createElement('input');
        input.setAttribute('readonly', 'readonly');
        input.setAttribute('value', copyText);
        document.body.appendChild(input);
        input.select();
        input.setSelectionRange(0, 9999);
        if (document.execCommand('copy')) {
          document.execCommand('copy');
          uni.showModal({
            content: copyText,
            showCancel: false
          });
        }
        document.body.removeChild(input);
        // #endif
      },
      goTbDetail(item, index){
        // #ifndef H5 || APP-PLUS
        getApp().mtj.trackEvent('carousel', { // 埋点统计
          title: item.title,
          index: index,
          ad_type: item.type,
          user_id: this.userInfo.id || 0,
        });
        // #endif
        
        uni.navigateTo({
          url: `/pages/index/carouselitemtb?materialIds=${item.materialIds}&&title=${item.title}&&templateType=${item.templateType}`
        });
      },
      goDtkDetail(item, index){
        // #ifndef H5 || APP-PLUS
        getApp().mtj.trackEvent('carousel', { // 埋点统计
          title: item.topicName,
          index: index,
          ad_type: 3,
          user_id: this.userInfo.id || 0,
        });
        // #endif
        if(item.type === 3){
          plus.runtime.openURL(`taobao:${item.jumpUrl.slice(6)}`)
        } else if(item.type === 2){
          uni.navigateTo({
            url: `/pages/itemdetail/tbdetail?url=` + encodeURIComponent(`http://www.mtduoshou.com/index.php${item.jumpUrl}`)
          });
        }
        // uni.navigateTo({
        //   url: `/pages/index/carouselitemdtk?topicId=${item.topicId}`
        // });
      },
      getAdvertise() {
        let swiperList = [] // 注意下拉刷新
        // #ifndef APP-PLUS || H5
        this.$api.user.getAdvertiseByType({ // 获取数据库广告位
          type: 1, // 广告位类型:1轮播，2商品内部
        }).then(res => {
          swiperList = swiperList.concat(res.data.list)
          this.swiperList = swiperList
        })
        // #endif
        // #ifdef APP-PLUS || H5
        this.$api.dtkapi.dtkCarousel().then(res => {
          swiperList = swiperList.concat(res.data.config)
          this.currentCarousel = swiperList[0]
          this.swiperList = swiperList
        })
        // #endif
        
        // this.$api.dtkapi.topicCatalogue({ // 获取大淘客广告位，不完善，暂时不使用
        //   version: 'v1.1.0',
        // }).then(res1 => {
        //   res1.data = res1.data.filter(item => { // 筛选出空数据
        //     return item.banner.length > 0
        //   })
        //   this.swiperList = this.swiperList.concat(res1.data)
        // })
      },
    }
  }
</script>

<style scoped lang="scss">
  .carousel{
    .block{
      position: absolute;
      height: 220upx;
      width: 100%;
      transition: .7s;
      border-radius: 0 0 30upx 30upx;
    }
    .screen-swiper{
      padding: calc(var(--status-bar-height) + 20upx) 20upx 0;
      min-height: 280upx;
      .swiper-box{
        height: 280upx;
        border-radius: 20upx;
        .swiper-item{
        }
      }
    }
  }
</style>
